<!-- 布局 header 组件 -->
<script setup lang="ts">
import router from '@/router';
import { BellOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
import type { MenuClickEventHandler, MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ref } from 'vue';
import { RouterLink, useRoute } from 'vue-router';

const current = ref<MenuInfo['key'][]>(); // 默认选中的菜单项 key
const route = useRoute(); // 获取当前路由
const show = ref(false); // 显示/隐藏菜单
const items = ref<MenuProps['items']>([
  {
    key: 'home',
    label: h(RouterLink, { to: '/home' }, { default: () => '首页' }),
    title: '首页',
  },
  {
    key: 'recommend',
    label: h(RouterLink, { to: '/recommend' }, { default: () => '推荐' }),
  },
  {
    key: 'technicalarticles',
    label: h(RouterLink, { to: '/technicalarticles' }, { default: () => '技术文章' }),
  },
  {
    key: 'chatroom',
    label: h(RouterLink, { to: '/chatroom' }, { default: () => '聊天室' }),
  },
  {
    key: 'codercommunity',
    label: h(RouterLink, { to: '/codercommunity' }, { default: () => 'Coder社区' }),
  }
]);

const handleClick: MenuClickEventHandler = (event) => {
  const { key } = event
  console.log(key);
  current.value = [key]; // 更新当前选中的项
}

// 设置当前选中的菜单项
onMounted(() => {
  current.value = [route.path.split('/')[1]]; // 获取当前路由的第一级路径
});


</script>

<template>
  <header class="header">

    <!-- logo -->
    <div class="header-logo">
      <img src="@/assets/logo.svg" alt="logo">
      <div class="header-logo-text">
        <span class="header-logo-text-title">NEXT</span>
        <div class="header-logo-text-title-sub">JS</div>
      </div>
      <!-- router -->
      <a-menu class="my-menu" @click="handleClick" v-model:selectedKeys="current" mode="horizontal" :items="items" />

      <!-- 菜单按钮，网页缩小出现 -->
      <button class="header-logo-icon" @click="show = !show">
        <UnorderedListOutlined />
      </button>
      <div class="fixed-div" v-show="show">
        <a-menu class="my-menu link" @click="handleClick" v-model:selectedKeys="current" :items="items" />
        <!-- 这里应该还有个通知的选项 -->
      </div>
    </div>



    <!-- input - login -->
    <div class="header-right">
      <div class="header-right-input">
        <!-- input -->
        <educ-input />
      </div>
      <!-- 通知 -->
      <a-tooltip placement="top">
        <template #title>
          <span>通知</span>
        </template>
        <div class="header-right-icon" @click="router.push('/notice')">
          <BellOutlined class="header-right-icon-change" />
        </div>
      </a-tooltip>

      <div class="header-right-login">
        <!-- login -->
        <educ-login />
      </div>
    </div>
  </header>
</template>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 70px;
  color: $educ-font-color-black;
  background-color: $educ-color-primary;

  &-logo {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: start;

    img {
      width: $educ-width-height-base;
      height: $educ-width-height-base;
    }

    &-text {
      display: flex;
      align-items: flex-end;
      margin-left: 30px;
      color: white;

      &-title {
        font-size: $educ-font-size-lg;

        &-sub {
          font-size: 15px;
        }
      }

    }

    &-icon {
      z-index: 100;
      display: none;
      margin-left: .625rem;
      font-size: 1.25rem;
      color: white;
      cursor: pointer;
      background-color: transparent;
      border: none;
    }
  }

  &-center {
    display: flex;
    flex: 1;
    justify-content: space-around;
    width: 100%;

  }

  &-right {
    display: flex;
    align-items: center;

    &-icon {
      margin-right: 10px;
      cursor: pointer;

      &-change {
        font-size: 20px;
        color: $educ-color-white;
      }

    }

    &-input {
      margin-right: 10px;
    }
  }
}

// 设置菜单样式
.ant-menu,
.ant-menu-sub,
.ant-menu-inline {
  color: white !important;
  background-color: transparent !important;
}

// 设置子菜单展开样式
.ant-menu-submenu>.ant-menu {
  background-color: rgb(255 255 255) !important;
}

.ant-menu-submenu-title {
  color: white !important;
}


:deep(.ant-menu-item) {
  margin-left: 35px !important;
  font-size: 16px !important;
}

// 设置 a 链接样式
:deep(.ant-menu-item a:hover) {
  color: white !important;
}

// 选中菜单状态
:deep(.ant-menu-item-selected) {
  color: white !important;
}

// 选中菜单下划线
:deep(.ant-menu-item-selected::after) {
  border-bottom-color: #fff !important;
  border-bottom-width: 2px !important;
}

// 悬停时显示样式
:deep(.ant-menu-item-active::after) {
  border-bottom-color: #fff !important;
  border-bottom-width: 2px !important;
}

.fixed-div {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  display: none;
  width: 50vw;
  height: 100vh;
  background-color: #c1c1c1c5;

  .link {
    display: block;
  }
}

@media screen and (width <= 992px) {
  .header {
    padding: 10px 20px;

    .header-logo {
      img {
        display: none;
      }

      &-text {
        display: none;
      }
    }
  }
}

@media screen and (width <= 768px) {
  .my-menu {
    display: none;
  }

  .header-logo-icon {
    display: block;
  }

  .fixed-div {
    display: block;
  }
}


@media screen and (width >= 768px) {
  .my-menu {
    display: flex;
    flex: 1;
  }
}
</style>